<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count:{{count}}</p>
        <button @click="change">change</button>
    </div>
    <script src="vue.js"></script>
    <script src="my-vuex.js"></script>
    <script>
        Vue.use(Vuex);
        const store = new Vuex.Store({
            state:{count:0},
            mutations:{
                add(state,payload){
                    state.count+=payload.amount;
                },
                minus(state,payload){
                    state.count-=payload.amount;
                }
            },
            actions:{
                incrementAsync(context,payload){
                    return new Promise((resolve)=>{
                        setTimeout(()=>{
                            context.commit('add',payload);
                            resolve();
                        },1000);
                    });
                },
                decrementAsync(context,payload){
                    return new Promise((resolve)=>{
                        setTimeout(()=>{
                            context.commit('minus',payload);
                            resolve();
                        },1000);
                    });
                }
            }
        });
        var vm = new Vue({
            el:'#app',
            store,
            computed:{
                count(){
                    return this.$store.state.count;
                }
            },
            methods:{
               async change(){
                await this.$store.dispatch('incrementAsync',{amount:1});
                await this.$store.dispatch('decrementAsync',{amount:1});
                await this.$store.dispatch('incrementAsync',{amount:1});
                console.log('1 -1 1 done');
                   /*  this.$store.dispatch('incrementAsync',{amount:1})
                    .then(()=>{
                        return this.$store.dispatch('decrementAsync',{amount:1})
                    }).then(()=>{
                        return this.$store.dispatch('incrementAsync',{amount:1})
                    }).then(()=>{
                        console.log('1 -1 1 done');
                    }); */
               }
            }
        });
    </script>
</body>
</html>